<template>
  <div>
    <div>
      <el-checkbox v-model="showRichText">显示富文本图</el-checkbox>
    </div>
    <common-echarts v-show="showRichText" :option="option1"></common-echarts>
    <common-echarts v-show="!showRichText" :option="option2"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";

import subway from "@/assets/subway.gif";
import car from "@/assets/car.jpeg";
import bicycle from "@/assets/bicycle.jpeg";

export default {
  name: "richtextEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option1() {
      let series = [
        {
          type: "scatter",
          data: [
            {
              value: [0, 0],
              //位置
              label: {
                //富文本内容
                normal: {
                  //文本块样式定义
                  show: true,
                  formatter: [
                    "默认文字样式",
                    "{a|文字描边宽度与颜色}",
                    "{b|带背景色边界圆角}",
                    "{c|带有色阴影且阴影在x、y轴偏移}",
                  ].join("\n"),
                  backgroundColor: "#ddd", //文本块背景色
                  borderColor: "#444", //描边颜色
                  borderWidth: 4, //描边宽度
                  borderRadius: 10, //描边半径
                  padding: 15, //描边扩充空间
                  color: "#000", //默认字体颜色
                  fontSize: 20, //默认字体大小
                  shadowBlur: 50, //阴影模糊等级
                  shadowColor: "#666", //阴影颜色
                  shadowOffsetX: 3, //阴影x轴偏移
                  shadowOffsetY: 3, //阴影y轴偏移
                  lineHeight: 30, //行高
                  rich: {
                    //文本片段样式定义
                    a: {
                      //样式a
                      fontSize: 30, //字体大小
                      textBorderColor: "#00F", //文字描边颜色
                      textBorderWidth: 4, //文字描边宽度
                      color: "#ff0", //文字颜色
                    },
                    b: {
                      backgroundColor: "#F0F", //文字背景色
                      color: "#000", //文字颜色
                      fontSize: 15, //文字大小
                      borderRadius: 10, //文字边角半径
                      padding: 6, //文字边界扩充
                    },
                    c: {
                      backgroundColor: "#04f",
                      padding: 4, //文字边界扩充
                      color: "#FFF", //文字颜色
                      shadowBlur: 5, //阴影模糊等级
                      shadowColor: "#0F0", //阴影颜色
                      shadowOffsetX: 8, //阴影x轴偏移
                      shadowOffsetY: 8, //阴影y轴偏移
                    },
                  },
                },
              },
            },
          ],
        },
      ];

      return {
        title: {
          text: "富文本",
          subtext: "依赖散点图：scatter",
        },
        xAxis: {
          //不显示x轴
          axisLabel: { show: false },
          axisLine: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          min: -1,
          max: 1,
        },
        yAxis: {
          //不显示y轴
          axisLabel: { show: false },
          axisLine: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          min: -1,
          max: 1,
        },
        // label,
        series: series,
      };
    },
    option2() {
      var Icons = {
        //图标本地路径
        subway: subway,
        car: car,
        bicycle: bicycle,
      };
      var Label = { normal: { show: true } };

      return {
        //数据和设置部分
        title: {
          text: "出行交通工具统计", //标题
          subtext: "可视化中使用图标",
          x: "left",
        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        legend: {
          data: ["A职场", "B职场", "C职场"], //图例
          x: "30%", // 距离左边距的距离
        },
        grid: { left: 90 }, //网格
        xAxis: {
          type: "value", // x轴
          axisLabel: { formatter: "{value}" },
        },
        yAxis: {
          type: "category", // y轴
          inverse: true,
          data: ["subway", "car", "bicycle"],
          axisLabel: {
            formatter: function (value) {
              return "{" + value + "| }\n{value|" + value + "}";
            },
            margin: 15,
            rich: {
              value: {
                lineHeight: 20,
                align: "center",
              },
              subway: {
                height: 60,
                width: 60,

                align: "center",
                backgroundColor: { image: Icons.subway },
              },
              car: {
                height: 60,
                width: 60,
                align: "center",
                backgroundColor: { image: Icons.car },
              },
              bicycle: {
                height: 60,
                width: 60,
                align: "center",
                backgroundColor: { image: Icons.bicycle },
              },
            },
          },
        },
        series: [
          {
            name: "A职场", //数据部分
            type: "bar",
            data: [67, 40, 39],
            label: Label,
          },
          {
            name: "B职场",
            type: "bar",
            label: Label,
            data: [98, 54, 40],
          },
          {
            name: "C职场",
            type: "bar",
            label: Label,
            data: [76, 25, 72],
          },
        ],
      };
    },
  },
  data() {
    return {
      showRichText: true,
    };
  },
  methods: {},
};
</script>
